<template>
	<view>
        <view class="order-status-view">
            <view class="status-text-view">
                <view>
                    <u-icon class="u-margin-right-10" size="36" :name="
                        order.order_operate_allowable_vo.allow_pay
                        || order.order_operate_allowable_vo.allow_ship
                        || order.order_operate_allowable_vo.allow_rog ? 'clock' : 'checkmark-circle'">
                    </u-icon>
                </view>
                <view>
                    {{order.order_type === 'PINTUAN' ? order.ping_tuan_status : order.order_status_text}}
                </view>
            </view>
            <view class="sub-text-view">
                <view class="sub-text" v-if="order.order_operate_allowable_vo.allow_pay">需付款{{order.need_pay_money}}</view>
                <view class="sub-text" v-if="order.order_operate_allowable_vo.allow_ship">等待商家发货</view>
                <view class="sub-text" v-if="order.order_operate_allowable_vo.allow_rog">等待您确认收货</view>
            </view>
        </view>
        <view v-if="order.order_operate_allowable_vo.allow_check_express" class="block-view">
            <view class="express-item u-flex u-row-between" @click="onExpress(order)">
                <view class="u-flex">
                    <view>
                        <u-image class="u-margin-left-30" width="45rpx" height="45rpx" src="/static/images/truck.png"></u-image>
                    </view>
                    <view class="express-text">
                        <template v-if="express">
                            <view class="u-line-2 text">{{express.name}}</view>
                            <view class="time">{{express.courier_num}}</view>
                        </template>
                        <template v-else class="u-line-2 text">暂无物流信息，请您耐心等待~</template>
                    </view>
                </view>
                <view>
                    <u-icon color="#909399" name="arrow-right"></u-icon>
                </view>
            </view>
        </view>
        <view class="block-view">
            <addr
                left_icon="/static/images/address.png"
                :name="order.ship_name"
                :mobile="order.ship_mobile"
                :addrs="order.ship_province +''+ order.ship_city +''+ order.ship_county"
                :addr="order.ship_addr">
            </addr>
        </view>
        <view v-model="order" class="u-margin-bottom-20">
            <view class="order-list-view" >
                <view class="order-header">
                    <view class="order-sn">
                        <text>商品列表</text>
                    </view>
                </view>
                <view class="goods-list-view" v-for="(sku,skuIndex) in order.order_sku_list" @click="onGoods(sku)">
                    <goods-info
                        :goodsName="sku.name"
                        :goodsNum="sku.num"
                        :goodsPrice="sku.original_price"
                        :goodsImg="sku.goods_image"
                        :goodsSpecList="sku.spec_list"
                        :goodsPromotion="sku.promotion_tags"
                        :goodsInfo="sku"
                    >
                    </goods-info>
                    <view class="u-flex u-row-right u-margin-bottom-10" v-if="sku.goods_operate_allowable_vo.allow_apply_service">
                        <view>
                            <u-button shape="circle" :custom-style="customStyle" @click="applySale(sku)" >申请售后</u-button>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="u-margin-bottom-20" v-if="giftList || giftCoupon">
            <view class="order-gift-view" >
                <view class="gift-header">
                    <view class="gift-title">
                        <text>赠品列表</text>
                    </view>
                </view>
                <view class="gift-list-view"  v-for="(gift,giftIndex) in giftList" v-if="giftList">
                    <view class="gift-img-view">
                        <u-image border-radius="10" width="120rpx" height="120rpx" :src="gift.gift_img"></u-image>
                    </view>
                    <view class="gift-info-view">
                        <view class="u-line-2">
                             {{gift.gift_name}}
                        </view>
                    </view>
                    <view class="gift-price-view">
                        <custom-price :price="gift.gift_price" :fontWeight="600" size="30" ></custom-price>
                    </view>
                </view>
                <view class="gift-list-view" v-if="giftCoupon">
                    <view class="gift-img-view">
                       <u-image border-radius="10" width="120rpx" height="120rpx" src="/static/images/icon-color-coupon.png"></u-image>
                    </view>
                    <view class="gift-info-view">
                        <view class="u-line-2">
                             价值<text class="gift-coupon-price">{{giftCoupon.coupon_price | unitPrice('￥')}}</text>的优惠券
                        </view>
                    </view>
                </view>
            </view>

        </view>
        <view v-model="order" class="block-view">
            <view class="block-item-view">
                <view class="title">订单编号：</view>
                <view class="value">{{order.sn}}</view>
            </view>
            <view class="block-item-view">
                <view class="title">下单时间：</view>
                <view class="value">{{$u.timeFormat(order.create_time,'yyyy-mm-dd hh:MM:ss')}}</view>
            </view>
            <u-line margin="30rpx 0rpx"></u-line>
            <view class="block-item-view">
                <view class="title">支付方式：</view>
                <view class="value">{{order.payment_type === 'COD' ? '货到付款' : '在线支付'}}</view>
            </view>
            <view class="block-item-view" v-if="order.payment_time">
                <view class="title">支付时间：</view>
                <view class="value">{{$u.timeFormat(order.payment_time,'yyyy-mm-dd hh:MM:ss')}}</view>
            </view>
            <view class="block-item-view" v-else-if="!order.need_pay_money">
                <view class="title">支付时间：</view>
                <view class="value">{{$u.timeFormat(order.create_time,'yyyy-mm-dd hh:MM:ss')}}</view>
            </view>
            <view class="block-item-view" v-else>
                <view class="title">支付状态：</view>
                <view class="value">未支付</view>
            </view>
			<view class="block-item-view" v-if="order.order_status_text == '已取消' ? true : false">
				<view class="title">取消原因：</view>
				<view class="value">{{order.cancel_reason}}</view>
			</view>
            <u-line margin="30rpx 0rpx"></u-line>
            <view class="block-item-view">
                <view class="title">配送方式：</view>
                <view class="value">{{order.logi_name == null?'暂无配送方式':order.logi_name}}</view>
            </view>
            <view class="block-item-view" v-if="order.ship_time">
                <view class="title">发货时间：</view>
                <view class="value">{{$u.timeFormat(order.ship_time,'yyyy-mm-dd hh:MM:ss')}}</view>
                <!-- <view class="value">{{$u.timeFormat(order.ship_time,'yyyy-mm-dd hh:MM:ss') ==null ? '未发货': $u.timeFormat(order.ship_time,'yyyy-mm-dd hh:MM:ss') }}</view> -->
            </view>
            <u-line margin="30rpx 0rpx"></u-line>
            <view class="block-item-view">
                <view class="title">订单备注：</view>
                <view class="value" >{{$u.test.isEmpty(order.remark)? '无备注':order.remark}}</view>
            </view>
            <view class="block-item-view">
                <view class="title">发票信息：</view>
                <view class="value click-color" v-if="order.receipt_history && order.receipt_history.receipt_title" @click="onReceipt">查看发票</view>
                <view class="value" v-else>未开发票</view>
            </view>
        </view>
        <view class="block-view">
            <view>
                <view class="block-item-space-between-view ">
                    <view class="title">商品总额：</view>
                    <custom-price textColor="#333333" :price="order.goods_original_total_price" fontWeight="600" :size="32" ></custom-price>
                </view>
                <view class="block-item-space-between-view " v-if="order.coupon_price">
                    <view class="title">优惠券抵扣：</view>
                    <custom-price textColor="#333333" :price="order.coupon_price" fontWeight="600" :size="32" ></custom-price>
                </view>
                <view class="block-item-space-between-view " v-if="order.cash_back">
                    <view class="title">优惠金额：</view>
                    <custom-price textColor="#333333" :price="order.cash_back" fontWeight="600" :size="32" ></custom-price>
                </view>
                <view class="block-item-space-between-view " v-if="order.use_point">
                    <view class="title">积分抵扣：</view>
                    <view style="font-size:32rpx;font-weight: 600;color: rgb(51, 51, 51);">-{{ order.use_point }}<text style="font-size: 30rpx;">积分</text></text></view>
                </view>
                <view class="block-item-space-between-view ">
                    <view class="title">运费：</view>
                    <custom-price textColor="#333333" :price="order.shipping_price" fontWeight="600" :size="32" ></custom-price>
                </view>
                <view class="block-item-space-between-view " v-if="order.payment_type === 'ONLINE'">
                    <view class="title"></view>
                    <view class="value u-flex">
                        <view>在线支付金额：</view>
                        <custom-price :price="order.need_pay_money" fontWeight="600" :size="40" ></custom-price>
                    </view>
                </view>
                <view class="block-item-space-between-view " v-if="order.payment_type === 'COD' && order.pay_status === 'PAY_YES'">
                    <view class="title"></view>
                    <view class="value u-flex">
                        <view>实际支付金额：</view>
                        <custom-price :price="order.pay_money" fontWeight="600" :size="40" ></custom-price>
                    </view>
                </view>
                <view class="block-item-space-between-view ">
                    <view class="title"></view>
                    <view class="value u-flex">
                        <view>预存款支付金额：</view>
                        <custom-price :price="order.balance" fontWeight="600" :size="40" ></custom-price>
                    </view>
                </view>
            </view>
        </view>
        <u-popup v-model="receiptShow" mode="bottom" border-radius="14" length="60%">
			<view class="receipt-header u-flex u-row-center">
                发票信息
            </view>
            <view v-if="!this.$u.test.isEmpty(order.receipt_history)" >
                <view class="receipt-item u-flex u-row-between">
                    <view class="title">发票类型</view>
                    <view class="value">{{order.receipt_history.receipt_type | receiptType}}</view>
                </view>
                <view class="receipt-item u-flex u-row-between">
                    <view class="title">发票抬头</view>
                    <view class="value u-line-1">{{order.receipt_history.receipt_title}}</view>
                </view>
                <view class="receipt-item u-flex u-row-between">
                    <view class="title">发票内容</view>
                    <view class="value">{{order.receipt_history.receipt_content}}</view>
                </view>
                <view class="receipt-item u-flex u-row-between" v-if="order.receipt_history.tax_no">
                    <view class="title">发票税号</view>
                    <view class="value">{{order.receipt_history.tax_no}}</view>
                </view>
            </view>
		</u-popup>
       <view class="assemble-detail" v-if="order.order_status !== 'CONFIRM' && order.order_status !== 'CANCELLED' && order.order_type === 'PINTUAN'">
            <u-button shape="circle" :custom-style="customStyle" @click="assembleDetail(order)" >查看拼团详情</u-button>
        </view>
        <u-divider>到底了哦~</u-divider>
        <!-- 进入加载 -->
        <loading-view v-if="loading"></loading-view>
	</view>
</template>

<script>
    import * as API_Order from '@/api/order.js'
    import * as API_Trade from '@/api/trade.js'

	export default {
		data() {
			return {
                orderSn: '',
                order: {
                    order_operate_allowable_vo: {
                        allow_pay: false,
                        allow_ship: false,
                        allow_rog: false,
                    }
                },
                express: '',
                customStyle: {
                    float: 'right',
                    marginRight: '20rpx',
                    marginBottom: '20rpx',
                    width: '180rpx',
                    height: '60rpx',
                    fontSize: '25rpx',
                },
                receiptShow: false,
                giftList:[],
                giftCoupon: {},
                loading: true
			};
		},
        onShow(options) {
        },
        onLoad(options) {
            this.orderSn = options.orderSn;
            this.getDetail();
        },
        filters: {
            receiptType(type) {
                switch (type) {
                    case 'VATORDINARY' : return '增值税普通发票'
                    case 'ELECTRO' : return '电子普通发票'
                    case 'VATOSPECIAL' : return '增值税专用发票'
                    default: return '不开发票'
                }
            }
        },
        methods: {
            getDetail(){
                API_Order.getOrderDetail(this.orderSn).then(res => {
                    const order = res;
                    order.order_sku_list.forEach(sku => {
                        let specValues = "";
                        if (sku.spec_list !== null){
                            sku.spec_list.forEach(spec => {
                                specValues += spec.spec_value+",";
                            })
                        }
                        sku.spec_value_str = specValues.slice(0,specValues.length-1);
                    })
                    this.order = order;
                    this.giftList = this.order.gift_list;
                    this.giftCoupon = this.order.gift_coupon;
                    this.getExpress();
                    this.loading = false
                })
            },
            //读取物流信息
            getExpress(){
                if(!this.order.order_operate_allowable_vo.allow_check_express){
                    return;
                }
                API_Trade.getExpress(this.order.logi_id,this.order.ship_no).then(res => {
                    this.express = res;
                })

            },
            //查看商品
            onGoods(sku){
                uni.navigateTo({
                    url: '/goods-module/goods?goods_id='+sku.goods_id,
                })
            },
            //查看物流
            onExpress(order) {
                uni.navigateTo({
                    url: '/order-module/order/express?logi_id=' + order.logi_id + '&ship_no=' + order.ship_no
                })
            },
            //申请售后
            applySale(sku) {
                uni.navigateTo({
                    url: `/order-module/order/after-sale/after-sale-select?sn=${this.orderSn}&sku=${encodeURIComponent(JSON.stringify(sku))}`
                })
            },
            assembleDetail(order) {
                uni.navigateTo({
                    url: `/order-module/order/assemble?order_sn=${this.orderSn}&pay_status=${this.order.pay_status}`
                })
            },
            //查看发票
            onReceipt(){
                this.receiptShow = true;
            }
        }
	}
</script>

<style lang="scss">
    .order-status-view {
        background: linear-gradient(145deg,#ff9000,#ff5000 77%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 35rpx;
        /* #ifdef APP-PLUS */
        padding-top: 130rpx;
        /* #endif */
        /* #ifndef APP-PLUS */
        padding-top: 80rpx;
        /* #endif */
        padding-bottom: 20rpx;
        .status-text-view {
            display: flex;
            flex-direction: row;
            font-weight: 500;
        }
        .sub-text-view {
            margin-top: 10rpx;
            .sub-text {
                font-size: 25rpx;
            }
        }
    }
    .order-gift-view {
        background-color: #FFFFFF;
        border-radius: 10rpx;
        .gift-header {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding: 30rpx 20rpx;
            .gift-title {
                font-size: 33rpx;
                font-weight: bold;
            }
        }
        .gift-list-view {
            padding: 0rpx 20rpx;
            padding-bottom: 10rpx;
            display: flex;
            flex-direction: row;
            line-height: 120rpx;
            .gift-img-view {
                position: relative;
            }
        }
        .gift-info-view {
            margin: 0rpx 20rpx;
            flex: 1;
            .gift-coupon-price{
                color: #f42424;
            }
        }
        .gift-price-view {
            text-align: right;
            .goods-price {
                font-weight: bold;
            }
        }
    }
    .order-list-view {
        background-color: #FFFFFF;
        border-radius: 10rpx;
        .order-header {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding: 30rpx 20rpx;
            .order-sn {
                font-size: 33rpx;
                font-weight: bold;
            }
            .order-status {
                color: #ff5000;
                font-weight: 500;
            }
        }
        .goods-list-view {
            padding: 0rpx 20rpx;
            padding-bottom: 10rpx;
        }
        .order-price-view {
            padding-right: 20rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
            .order-total-price {
                color: #82848a;
                margin-left: 10rpx;
            }
            .order-pay-price {
                font-size: 33;
                font-weight: 600;
                margin-left: 8rpx;
            }
        }
        .order-footer {
            padding: 20rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
        }
    }
    .block-view {
        background-color: #fff;
        padding: 20rpx;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
        .header {
            font-weight: 600;
            margin-bottom: 20rpx;
        }
        .block-item-view {
            display: flex;
            flex-direction: row;
            margin: 13rpx 0rpx;
            font-size: 25rpx;
            .title {
               width: 200rpx;
               font-size: 31rpx;
            }
            .value {
                font-weight: 600;
                font-size: 31rpx;
                word-break: break-all;
                width: 87%;
            }
            .click-color{
                color: $u-type-error;
            }
        }
        .block-item-space-between-view {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin: 13rpx 0rpx;
            font-size: 25rpx;
            .title {
               width: 200rpx;
               font-size: 31rpx;
            }
            .value {
                font-weight: 600;
                font-size: 31rpx;
            }
        }
        .express-item {
            .express-text {
                margin-left: 40rpx;
                font-size: 25rpx;
                .text{

                }
                .time{
                    color: $u-tips-color;
                    margin: 8rpx 0rpx;
                    font-size: 26rpx;
                }
            }
        }
    }
    .receipt-header {
        margin: 20rpx 0rpx;
        font-size: 33rpx;
    }
    .receipt-item {
        margin: 20rpx 30rpx;
        .title {
            font-size: 30rpx;
            width: 400rpx;
        }
        .value{
            font-weight: 600;
            font-size: 31rpx;
        }
    }
</style>
